<template>
	<view class="login" :style="{height:uniscreenHeight+'px'}">
		<view class="login_logo">
			<view class="dog_logo_view">
				<image class="dog_logo" src="../../static/DogDongb.png" />
			</view>
			<text class="logo_text">狗头博客</text>
		</view>
		<view class="login_button">
			<view class="login_wx_buttton">
				<button class="wx_buttton" @click="wxlogin">
					<icon class="t-icon t-icon-weixin" style="width: 50rpx;height: 50rpx;vertical-align: middle;" />
					<text class="wx-text">微信一键登入</text>
				</button>
				<view class="login_phone_text">
					<text @click="phoneLogin()">手机号登入</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex' //引入mapState
	//登入 api 接口
	import {
		userlogin
	} from "@/api/UserApi.js"
	export default {
		data() {
			return {
				wxUserProfile: {
					code: '', // 微信 code
					UserName: '', // 微信用户名
					avatarUrl: '', // 用户头像
					loginType: 0
				}
			}
		},
		methods: {
			wxlogin() {
				wx.getUserProfile({
					desc: '获取用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						uni.login({
							"provider": "weixin",
							"onlyAuthorize": true, // 微信登录仅请求授权认证
							success: async (event) => {
								//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
								this.wxUserProfile.code = event.code
								this.wxUserProfile.UserName = res.userInfo.nickName
								this.wxUserProfile.avatarUrl = res.userInfo.avatarUrl
								const {
									data
								} = await userlogin(this.wxUserProfile)

								this.$store.commit("adduser", data)
								if (data.code == 1) {
									uni.reLaunch({
										url: '/pages/index/index',
									});
								}
							}
						})
					}
				})
			},
			phoneLogin() {
				uni.navigateTo({
					url: '/pages/login/phoneLogin',
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		},
		computed: mapState({
			// 从state中拿到数据 箭头函数可使代码更简练
			uniscreenHeight: state => state.height,
		})
	}
</script>

<style lang="scss">
	.login {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-evenly;

		.login_logo {
			height: 50%;
			width: 100%;

			.dog_logo_view {
				height: 450rpx;
				width: 100%;
				display: table;
				text-align: center;

				.dog_logo {
					height: 450rpx;
					width: 500rpx;
					margin: 0 auto;
				}
			}

			.logo_text {
				display: inline-block;
				height: 100rpx;
				width: 100%;
				text-align: center;
				line-height: 100rpx;
				font-weight: bold;
				font-size: 50rpx;
			}
		}

		.login_button {
			height: 50%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.login_wx_buttton {
				height: 100rpx;
				width: 100%;

				.wx_buttton {
					height: 100rpx;
					width: 60%;
					border-radius: 50px;
					background-color: #09bb07;

					.wx-text {
						margin-left: 20rpx;
						line-height: 100rpx;
					}
				}

				.login_phone_text {
					height: 100rpx;
					width: 100%;
					text-align: center;
					line-height: 100rpx;
				}
			}
		}
	}
</style>